/**
 * Created by GUO on 2017/5/20.
 * @flow
 */

import React from 'react';
import {
    Text,
    StyleSheet,
    PixelRatio,
    TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';


export default class RssSection extends React.PureComponent{

    props: {
        data: Object,
        onPress?: ()=>void
    }

    render(){

        let {expanded,name} = this.props.data;

        return (
            <TouchableOpacity
                onPress={this.props.onPress}
                activeOpacity={0.5}
                style = {styles.item}>
                <Icon
                    style = {expanded?null:{transform:[{rotate:'-90deg'}]}}
                    size={24}
                    color="gray"
                    name='arrow-drop-down'/>
                <Text style={styles.itemName}>{name}</Text>
                <Text style={styles.flag}>聚合阅读</Text>
            </TouchableOpacity>
        );
    }
}

export const ITEM_HEIGHT = 48;
const styles = StyleSheet.create({
    item:{
        height:ITEM_HEIGHT,
        backgroundColor:'white',
        flexDirection: 'row',
        justifyContent:'flex-start',
        alignItems:'center',
        paddingHorizontal:10,
        borderBottomWidth: 1/PixelRatio.get(),
        borderColor:'#eaeaea'
    },
    itemName:{
        fontSize:16,
        color:'rgba(0,0,0,0.87)',
        flex:1,
        marginLeft:16,
    },
    flag:{
        fontSize:12,
        backgroundColor:'rgba(0,0,0,0.54)',
        color: 'white',
        fontWeight: 'bold',
        borderRadius:2,
        paddingHorizontal:2,
    }
});